<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "金豆明细");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>
<style>	
.title {
	z-index: 0 !important;
}
.overflow-hidden {
	overflow: hidden;
}
.nav-ul {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	float: left;
	font-size: 0.8rem;
	color: #999;
	padding: 0.5em 0em;
}
.nav-ul>* {
	position: relative;
	float: left;
	list-style: none;
	margin: 0.2rem 0.4rem;
}
.nav-arrow {
	vertical-align: middle;
	max-height: 0.5rem;
	padding-left: 0.2rem;
	transform: translateY(-0.05rem);
}

.weui-cell__bd{
	color:black;
}
.weui-cell__bd span {
	font-size: 12px;
	color: #9b9b9b !important;
}
	.weui-cell__bd span{
	  font-size:12px;
	  color:#c4b2b2;
	}

	.weui-cell__ft p{
	  font-size:14px;
	  color:black;
	}
	
	 .weui-cells:before{
      border-top: none;
	} 

.weui-tabbar {
    position: fixed !important;
	}
 
	 .weui-cell:active{
	   background-color: rgba(180, 180, 180, 0.5);
    } 
</style>

<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>
<div class="goback"	data-back-href="<c:url value='/wechat/acc/myWealth/myWealth'/>"></div>
	
<form class="findGoldenDetail" method="post" action="<c:url value='/wechat/acc/myWealth/bonusDetailList'/>">	
	<input type="hidden" class="goldenBeanType" name="goldenBeanType" value=""/>
	<input type="hidden" class="order" name="order" value="time"/>
	<input type="hidden" class="upOrDown" name="upOrDown" value="desc"/>
	<input type="hidden" class="startDate" name="startDate" value="1000/08/09"/>
	<input type="hidden" class="endDate" name="endDate" value="9999/12/30"/>
</form>
	
	<div class="weui-tab" style="padding-top:0px;padding-bottom:0px;margin-top:0px;margin-bottom:0px;border-bottom:1px solid #e5e5e5">
	<nav class="overflow-hidden toSearch" hidden>
		<ul class="nav-ul">			
			<li id="chooseTime">
		     	<span>日期选择</span>
		     	<img class="nav-arrow up_down" alt="" src="<c:url value='/images/we/productList/arrow_down.png' />">
	        </li>
			<li id="sort-by-time">
				<span>时间</span>
				<img class="nav-arrow up_down" alt="" src="<c:url value='/images/we/productList/arrow_down.png' />">
			</li>
            <li style="color: #999">
				<input id="chooseType" type="text" style="border: none; width: 1.5rem; font-size: 0.8rem; color: #999" placeholder="来源" onchange="change()">
				<img class="nav-arrow up_down" alt="" src="<c:url value='/images/we/productList/arrow_down.png' />">
			</li>
			
	        <li id="sort-by-golden" style="margin-left: 5px">
				<span>金豆数量</span>
				<img class="nav-arrow up_down" alt="" src="<c:url value='/images/we/productList/arrow_down.png' />">
			</li>
		</ul>
	</nav>
</div>

<div id="shareLevel" hidden style="border-bottom:1px solid #e5e5e5">
	<div class="weui-cell">
		<div class="weui-cell__hd">
			<label for="" class="weui-label">开始日期</label>
		</div>
		<div class="weui-cell__bd">
			<input id="startTime" class="weui-input" type="date" value="">
		</div>
	</div>
	<div class="weui-cell">
		<div class="weui-cell__hd">
			<label for="" class="weui-label">结束日期</label>
		</div>
		<div class="weui-cell__bd">
			<input id="endTime" class="weui-input" type="date" value="">
		</div>
	</div>
</div>

<!-- 给一个div，引入可变的list列表 -->
<div class="weui-panel_body" style="padding-top:0px;padding-bottom:0px;margin-top:0px;margin-bottom:0px;">
			
</div>
	
<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/tabmob.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>


<script type="text/javascript">
 
var status = 0;
var colorPrimary = "#999";
var colorSelected = "#2196F3";
var img_up = "<c:url value='/images/we/productList/arrow_up.png' />";
var img_down = "<c:url value='/images/we/productList/arrow_down.png' />";
var img_none = "<c:url value='/images/we/productList/arrow_none.png' />";

$(function(){
	toselect();

	//点击按金豆价格排序
	$('#sort-by-golden').click(function(){
		$(".up_down").attr("src", img_none);
		$("#shareLevel").hide();
		$("#goldenType").hide();
		$(".weui-panel_body").show();
		if(status == 0) {
			status = 1;
			$(this).css("color",colorSelected);
			$(this).children("img").attr("src", img_up);
			
			$(".order").val("goldenBeanAccount");
			$(".upOrDown").val("asc");
			
		} else if (status == 1) {
			status = 2;
			$(this).children("img").attr("src", img_down);
			
			$(".order").val("goldenBeanAccount");
			$(".upOrDown").val("desc");
			
		} else if (status == 2) {
			status = 1;
			$(this).children("img").attr("src", img_up);
			
			$(".order").val("goldenBeanAccount");
			$(".upOrDown").val("asc");
			
		} else if (status == 3 || status == 4 ) {
			status = 1;
			$(this).css("color", colorSelected);
			$(this).children("img").attr("src", img_up);
			$(this).siblings().css("color", colorPrimary);
			$(this).siblings().children("img").attr("src", img_none);
			
			$(".order").val("goldenBeanAccount");
			$(".upOrDown").val("asc");
			
		}
		toselect();
	});
	
	//点击按日期排序
	$('#sort-by-time').click(function(){
		$(".up_down").attr("src", img_none);
		$("#shareLevel").hide();
		$("#goldenType").hide();
		$(".weui-panel_body").show();
		if(status == 0) {
			status = 3;
			$(this).css("color",colorSelected);
			$(this).children("img").attr("src", img_up);
			
			$(".order").val("time");
			$(".upOrDown").val("asc");
			
		} else if (status == 3) {
			status = 4;
			$(this).children("img").attr("src", img_down);
			
			$(".order").val("time");
			$(".upOrDown").val("desc");
			
		} else if (status == 4) {
			status = 3;
			$(this).children("img").attr("src", img_up);
			
			$(".order").val("time");
			$(".upOrDown").val("asc");
			
		} else if (status == 1 || status == 2) {
			status = 3;
			$(this).css("color", colorSelected);
			$(this).children("img").attr("src", img_up);
			$(this).siblings().css("color", colorPrimary);
			$(this).siblings().children("img").attr("src", img_none);
			
			$(".order").val("time");
			$(".upOrDown").val("asc");
			
		}
		toselect();
	});
}); 

//ajax 传输数据
function toselect() {
	var formData=$(".findGoldenDetail").serialize();
	var action=$(".findGoldenDetail").attr("action");
	var html=$.getText(action,formData);
	$(".weui-panel_body").html(html);
} 

//把选项改为默认
function toOriginal(){
	$(".up_down").attr("src", img_none);
	$(".goldenBeanType").val("");
	$(".order").val("time");
	$(".upOrDown").val("desc");
	$(".startDate").val("1000/08/09");
	$(".endDate").val("9999/12/30");
}

 $(function(){
	 var time = 0 ;
	 /* 日期选择是否点击  */
	$("#chooseTime").on("click",function(){
		$("#goldenType").hide();
		toOriginal();
		if(time == 0){
			$("#shareLevel").show();
			time=1;
			 $("#startTime").on("change",function(){

				var time=$("#startTime").val();    
				var date= new Date(Date.parse(time.replace(/-/g,  "/")));
				$(".startDate").val(date); 
				 toselect(); 
			}); 
			 $("#endTime").on("change",function(){

				var time=$("#endTime").val();    
				var date= new Date(Date.parse(time.replace(/-/g,  "/")));
				$(".endDate").val(date); 
				 toselect(); 
			}); 
		}else if(time==1){
			$("#shareLevel").hide();
			time=0;
		}
		
	});
}); 
 
	$(function() {
		/* 类型选择是否点击  */
		$("#chooseType").click(function() {
			toOriginal();
		});
		$("#chooseType").select({
			title : "选择来源",
			items : [ {
				title : "全部",
				value : "",
			}, /* {
				title : "充值",
				value : "recharge",
			},  */{
				title : "支付",
				value : "pay",
			}, /* {
				title : "退款",
				value : "refund",
			}, */ {
				title : "奖金",
				value : "bonus",
			}, {
				title : "红包",
				value : "redEnvelopes",
			}, {
				title : "兑换",
				value : "exchange",
			}, {
				title : "签到",
				value : "sign"
			} , {
				title : "推广奖",
				value : "promotionAward",
			}, {
				title : "转入余额",
				value : "TransferToBalance"
			}   
			]
		});
	})
	function change() {
		$(".goldenBeanType").val($("#chooseType").data("values"));
		$("#chooseType").val("来源");
		toselect();
	}
	
	 /* 右上角齿轮点击效果 */
	var isHide = 0;
	$(".fa-cog").click(function () {
		if(isHide == 0){
			$(".toSearch").show();
			isHide = 1;
		}else{
			$(".toSearch").hide();
			isHide = 0;
		}
	})
</script>	
